<% include header_index.html %>

<style>

    .header{
        width: 100vw;
        background: white;
    }
    .header_div{
        width: 355px;
        margin: 0 auto;
    }
    .header_div img{
        width: 20px;
        height:20px;
        margin-top: 12px;
    }
    .header_div p{
        font-size: 15px;
        color: #181818;
        line-height: 44px;
        text-align: center;
    }
    .weui-navbar{
        overflow: scroll;
        height:44px;
        padding-left: 10px;
        background: white;
    }
    .weui-navbar__item.weui-bar__item--on{
        background: white;
        color: #ff8000;
    }
    .weui-navbar__item{
        width: 80px;
    }
    .weui-navbar__item:after{
        border: none;
    }
    .weui-navbar:after{
        border:none;
    }
    .weui-navbar__item{
        color: #181818;
        font-size: 13px;
    }
    body{
        background: rgb(243,243,243);
    }
    .weui-navbar__item img{
        height:4px;
        display: none;
    }
    .weui-bar__item--on img{
        display: block;
        width: 150px;
        margin: 0 auto;
        margin-top: 7px;
    }
    .weui-tab__bd{
        width: 100vw;

    }
    .weui-tab{

    }
    .hide1{
        width: 327px;
        float: left;
        height: 44px;
        overflow: hidden;
    }
    .hide{
        width: 100vw;
        overflow:hidden;
        overflow: scroll;
        height:44px;

    }
    ::-webkit-scrollbar {/*隐藏滚轮*/
        display: none;!important;
    }
    .show{
        width: 1200px;
        height:44px;
    }
    .categroy{
        width:68px;
        margin-left: 20px;
        height: 44px;
        line-height: 44px;
        float: left;
        text-align: center;
        font-size: 13px;
        color: #181818;

    }
    .rq{
        background: white;
        height: 44px;
        width: 100vw;
    }
    .selected{
        font-size: 13px;
        color: #ff8000;
    }
    .categroy img{
        height: 4px;
        position: relative;
        top: -4px;
        margin: 0 auto;
        display: none;
    }
    .selected img{
        display: block;
    }
    .down{
        float: left;
        height:15px;
        margin: 14.5px 16.5px;
    }
    .down_div{
        float: left;
        width:48px;
        height: 44px;
    }
    .shop_list_div{
        margin: 0 10px;
        height:90px;
        background: white;
        margin-top: 10px;
        border-radius: 6px;
    }
    .weui-tab__bd-item{
        width: 100vw;
    }
    .shop_logo{
        width: 70px;
        margin: 10px;
    }
    .shop_level img{
        /* border-top: 10px; */
        position: relative;
        width: 15px;
        /* margin-left: 10px; */
        top: 5px;
    }
    .w-100{
        width: 200px;
        text-indent: 10px;
        color: #adadad;
        font-size: 13px;
    }
    .shop_name{
        font-size: 18px;
        color: #121212;
        line-height: 30px;
    }
    .shop_level{
        line-height: 40px;
    }
    .detele{
        float: right;
        margin-right: 10px;
        width:20px;
    }
    .product_list_div{
        width: 100vw;
    }
    .product_div{
        width: 172px;
        height:272px;
        margin-left: 10px;
        background: white;
        margin-top: 10px;
        border-radius: 6px;
    }
    .product_file1{
        width: 172px;
        height:172px;
    }
    .product_name{
        margin: 0 10px;
        line-height:25px;
        height:50px;
        text-align: left;
        font-size: 15px;
        color: #000;
    }
    .product_price{
        margin: 0 10px;
        line-height: 30px;
        height:30px;
        font-size: 15px;
        color: #b80a2f;
    }
</style>
<div class="big_div">
    <div class="h44 header">
        <div class="header_div h44">
            <img src="images/default_wap/return.png" class="back fl" alt="">
            <img src="images/default_wap/moreblack.png" class="back fr" alt="">
            <p>
                我的收藏
            </p>
        </div>
    </div>



    <!--容器-->
    <!-- 容器 -->
    <div class="weui-tab">
        <div class="weui-navbar">
            <a class="weui-navbar__item" v-bind:class="{'weui-bar__item--on':type==1}" @click="type=1" href="./favorite_list?type=1#tab1">
                收藏商品
                <img src="images/default_wap/select.png" alt="">
            </a>
            <a class="weui-navbar__item" href="/favorite_list?type=0#tab2" @click="type=0" v-bind:class="{'weui-bar__item--on':type==0}" >
                收藏店鋪
                <img src="images/default_wap/select.png" alt="">
            </a>

        </div>
        <div class="weui-tab__bd">
            <div id="tab1" class="weui-tab__bd-item" v-bind:class="{'weui-tab__bd-item--active':type==1}">
                <div class="product_list_div">
                    <div class="product_div fl"  v-for="product in product_list">
                        <a :href="'./union/product?setp='+product.goods_type+'&uid='+product.f_uid">
                        <img src="images/default_wap/load.png" :data-src="'http://www.phmall.com.ph/union/'+product.goods_file1" class="product_file1" alt="">
                        <p class="product_name sl2">{{product.goods_name}}</p>
                        <p class="product_price">₱ {{product.goods_sale_price}}</p>
                        </a>
                    </div>
                </div>
            </div>
            <div id="tab2" class="weui-tab__bd-item" v-bind:class="{'weui-tab__bd-item--active':type==0}">
                <div class="shop_list_div" v-for="shop in shop_list" :class="'shop_'+shop.f_uid">
                    <a :href="'union/index?uid='+shop.f_uid">
                    <img src="images/default_wap/load.png" :data-src="'http://www.phmall.com.ph/union/'+shop.shop_logo" class="shop_logo fl" alt="">
                    <p class="shop_name sl1 w-100 fl">
                        {{shop.shop_name}}
                    </p>
                    <p class="sl1 w-100 shop_level fl"><d>信用: </d><img src="images/default_wap/lv_20.png" alt=""></p>
                    <img src="images/default_wap/clear.png" @click.stop="delete_shop(shop.f_uid)" class="detele" alt="">
                    <p class="sl1 w-100 shop_content fl">消保金额:{{shop.xb}}</p>
                    </a>
                </div>
                <div class="weui-loadmore">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>

        </div>
    </div>


</div>

<script>
    var page = new Vue({
        el: '.big_div',
        data: {
            start:0,
            num:10,
            type:'<%= type %>',
            select:1,
            shop_list:[],
            product_list:[]
        },
        methods:{
            delete_shop:function (uid) {
                $.post('/favorite/del_favorite',{f:uid,t:0},function (result) {
                    console.log(result);
                    result=result.data;
                    if(result==1)
                    {
                        $('.shop_'+uid).remove();
                    }
                });
            }
        },
        mounted:function () {
            var t=this;
            if(t.type==0)
            {
                $.post('/favorite/get_favorite',{t:this.type,num:this.num,s:this.start,ism:1,m:''},function (result) {
                    result=result.data;
                    if(t.type==0)
                    {

                        if(result!=0 && result.length>0)
                        {   
                            result.forEach(function (item,index) {
                                t.start++;
                                t.shop_list.push(item);
                            })

                        }
                        else
                        {
                            $.modal({
                                title: "警告",
                                text: "已经没有啦~",
                                buttons: [
                                    { text: "確定"}
                                ]
                            });
                        }

                    }

                })
            }
            else
            {
                $.post('/favorite/get_favorite',{t:this.type,num:this.num,s:this.start,ism:0},function (result) {
                    result=result.data;
                    if(t.type==1)
                    {
                        if(result!=0 && result.length>0)
                        {
                            result.forEach(function (item,index) {
                                t.start++;
                                t.product_list.push(item);
                            })

                        }
                        else
                        {
                            $.modal({
                                title: "警告",
                                text: "已经没有啦~",
                                buttons: [
                                    { text: "確定"}
                                ]
                            });
                        }

                    }

                })
            }

        }
    });

    $(function () {
        $(document.body).infinite();
        var loading = false;  //状态标记
        $(document.body).infinite().on("infinite", function() {
            if(loading) return;
            loading = true;

            if(page.type==0)
            {
                $.post('/favorite/get_favorite',{t:page.type,num:page.num,s:page.start,ism:1,m:''},function (result) {
                    result=result.data;
                    if(result!=0 && result.length>0)
                    {
                        result.forEach(function (item,index) {
                            page.start++;
                            page.shop_list.push(item);
                        })
                        loading = false;
                    }
                    else
                    {
                        $.modal({
                            title: "警告",
                            text: "已经没有啦~",
                            buttons: [
                                { text: "確定"}
                            ]
                        });
                    }
                });
            }




        });
    })
</script>






<!--底部栏-->
<% include footer.html %>
